<template>
  <div id="app">
    <!-- 导航栏 -->
    <div class="nav-s">
      <div class='nav'>
        <van-button type="default" class='nav-left' to="/home">
          <img src="./../../../../assets/HomeImg/6.png" alt="">
        </van-button>
        <van-search v-model="value" ref="" placeholder="帅哥本人" left action="" class='nav-cen' @click="navc" />
        <van-button type="default" class='nav-right' to="/cart"><img src="./../../../../assets/HomeImg/5.png" alt="">
        </van-button>
        <span></span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="main">
      <!-- 侧边导航栏 -->
      <div class="main-left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.pt_name" v-for="item in producttypehome" :key="item.pt_Id"
            @click="typeId(item.pt_Id)" />
        </van-sidebar>
      </div>
      <!-- 商品 -->
      <div class="main-right">
        <Detail :typeList="typeList" :chang="chang"></Detail>
      </div>
    </div>
  </div>
</template>
<script>
  import Detail from '@/components/Detail'
  export default {
    data: () => ({
      value: '',
      activeKey: 0,
      producttypehome: [],
      typeList: [],
      chang: 1
    }),
    created() {
      // this.id = this.$route.params.id
      // console.log(this.id)
      this.addProductType()
      this.getProductBuyType(1)
    },
    methods: {
      async getProductBuyType(id) {
        try {
          const data= await this.$Api.apiHome.getProductBuyType(id)
          this.typeList = data
          // console.log(this.typeList.typeList)
        } catch (error) {
          this.$Toast(error)
        }
      },
      typeId(id) {
        this.$router.push('/home/navllist/' + id)
        // this.getProductBuyType(this.id)
      },
      navc() {
        this.$router.push('/home/navcloist')
      },
      async addProductType() {
        try {
          const res = await this.$Api.apiHome.addProductType()
          const {
              data
          } = res
          this.producttypehome = data
          // console.log(data)
        } catch (error) {
          this.$Toast(error)
        }
      }
    },
    components: {
      Detail
    },
    watch: {
      '$route.path'(to, from) {
        this.getProductBuyType(this.$route.params.id)
      }
    }
  }

</script>
<style lang="less" scoped>
  // 去除下边滚动条
  html,
  body {
    height: 100%;
  }

  ::-webkit-scrollbar {
    width: 0;
  }

  body,
  #app {
    width: 100%;
    overflow-x: hidden;
  }

  // 导航栏
  .nav-s {
    width: 100%;
    height: 54px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;

    .nav {
      width: 100%;
      position: fixed;
      height: 54px;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid #e5e5e5;

      .nav-left,
      .nav-right {
        float: left;
        width: 15%;
        text-align: center;
        padding-top: 17px;
        border: none;

        img {
          width: 80%;
        }
      }

      .nav-cen {
        float: left;
        width: 70%;
        padding: 10px 0;
      }

      .van-search__content {
        background: #eee;
        color: #999;
      }
    }
  }

  // 内容
  .main {

    // 侧边导航栏
    .main-left {
      float: left;
      width: 21%;
      text-align: center;
    }

    // 商品
    .main-right {
      float: right;
      width: 79%;
    }
  }

</style>
